<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        body {
            display: flex;
        }

        .leftbox {
            width: 20%;
            background-color: rgb(54, 53, 53);
            color: white;
            display: flex;
            flex-direction: column;
        }

        .one,
        .two {
            height: 60px;
            text-align: center;
            line-height: 50px;
            font-size: 30px;
            border-bottom: 1px solid #eee;
        }

        .diyi {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        li {
            flex: 1;
            text-align: center;

        }

        .rightbox {
            flex: 1;
            background-color: aliceblue;
        }

        .header {
            height: 50px;
            background-color: white;
        }

        .rightbox .header .dier {
            float: left;
            flex-direction: column;
            line-height: 50px;
            margin-left: 20px;
        }

        .rightbox .header .dier input {
            display: inline-block;
            margin-left: 20px;
            background-color: #eee;
            border: none;
            margin-top: 15px;
            border-radius: 5px;
            width: 160px;

        }

        .rightbox .header ul li {
            float: left;
            margin-left: 20px;
            list-style: none;

        }

        .rightbox .header input {
            width: 100px;
            height: 20px;
            float: left;
        }

        .rightbox p {
            font-size: 28px;
            margin-left: 20px;
            margin-bottom: 20px;
            margin-top: 20px;
        }

        .left {
            width: 48%;
            background-color: rgb(250, 189, 189);
            height: 60%;
            float: left;
            margin-left: 20px;
        }

        .right {
            width: 48%;
            height: 60%;
            background-color: aquamarine;
            float: left;
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <div class="leftbox">
        <div class="one">AdminLTE 3</div>
        <div class="two">Alexander Pierce</div>
        <ul class="diyi">
            <li>Dashboard</li>
            <li>Dashboard V1</li>
            <li>Dashboard V2</li>
            <li>Dashboard V3</li>
            <li>Widgets</li>
            <li>charts</li>
            <li>Ul Elements</li>
            <li>Forms</li>
            <li>Tables</li>
            <li>EXAMPLES</li>
        </ul>
    </div>
    <div class="rightbox">
        <div class="header">
            <ul class="dier">
                <li>home</li>
                <li>contact</li>
                <input type="text" placeholder="Search">
            </ul>
        </div>
        <p>Dashboard v3</p>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script></script>
<script>
    //创建并初始化一个实例
    var oLeft = document.querySelector('.left');
    var e = echarts.init(oLeft);
    //绘制图表
    e.setOption({//图表的标题
        title: {
            text: 'Online Store Visitors',
            left: 10,
            top: 5
        },
        legend: {//图例
            bottom: 3,
            right: 10
        },
        tooltip: {
            trigger: 'axis'
        },
        // legend:{//图例
        //     data:['Email','Union Ads','Video Ads','Direct','Search Engine']
        // },
        xAxis: {//x轴设置
            type: 'category',
            left: 10,
            top: 5,
            boundaryGap: false,
            data: ['18h', '20h', '22h', '24h', '26h', '30h']
        },
        yAxis: {//y轴设置
            name: 'Visitors Over Time',
            max: 200,
            min: 0,
            splitNumber: 10,
            boundaryGap: [0.2, 0.2]
        },
        series: [//数据系列
            {
                name: 'This Week',
                smooth: true,
                type: 'line',
                symbol: 'circle',
                color: 'grey',
                data: [40, 60, 53, 76, 80, 95, 100],
            },
            {
                name: 'Last Week',
                type: 'line',
                symbol: 'circle',
                data: [130, 110, 170, 150, 120, 177, 165],
                smooth: true,
            }
        ]
    });

    var oRight = document.querySelector('.right');
    var s = echarts.init(oRight);

    s.setOption({
        title: {//标题
            text: 'Sales'
        },
        legend: {//图例
            bottom: 20,
            right: 10,
        },
        xAxis: {//x轴
            data: [
                'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
        },
        yAxis: {//y轴
            data: ['$0k', '$1k', '$2k', '$3k']
        },
        series: [//数据系列
            {
                name: 'This year',
                type: 'bar',
                data: [1, 2, 3, 2.6, 2.8, 2.6, 2.7, 3],
                color: 'hotpink',
                itemStyle: {
                    normal: {
                        color: 'hotpink',
                        lineStyle: { width: 2 },
                    }
                }
            },
            {
                name: 'Last year',
                type: 'bar',
                data: [0.7, 1.7, 2.8, 2, 2.6, 1.5, 2, 1.4],
                smooth: true,
                itemStyle: {
                    normal: {
                        color: 'gray',
                        lineStyle: { width: 2 },
                    }
                }

            }
        ]
    });
</script>